import React, { Component } from 'react'
import Home from './Home'
import ThemeContext from './context/theme-context'
import UserContext from './context/user-context'
export class App extends Component {
  constructor() {
    super()
    this.state = {
      product: {
        name: '水果刀',
        price: '19'
      },
      age: 18,
      
    }
  }
  render() {
    const {product, age} = this.state
    return (
      <div>
        {/* 普通传递数据方式 */}
        {/* <Home age={age} name={ product.name } price={ product.name } /> */}
        {/*  name={ product.name } price={ product.name } === {...product} */}
        {/* 使用 扩展运算符 ...object */}
        {/* <Home age={age} {...product} /> */}

        {/* 使用context进行非父子通信 */}
        {/*2.使用ThemeContext的Provider中 value 进行传递数据  */}
        <UserContext.Provider value={{nikename:'cube'}}>
          <ThemeContext.Provider value={{color: 'red', width: '100'}}>
            <Home {...product} />
          </ThemeContext.Provider>
        </UserContext.Provider>
      </div>
    )
  }
}

export default App